<template>
  <div class="login-container">
    <div class="login-background">
      <div class="data-bg-animation" id="data-bg-animation"></div>
      <div class="login-split-container">
        <!-- 左侧介绍区域 -->
        <div class="login-left">
          <div class="logo-wrapper">
            <img src="@/assets/logo.svg" alt="Logo" class="login-logo-large" />
          </div>
          <h1 class="product-name">析语DataTk V1.5</h1>
          <p class="product-slogan">智能数据分析与报告生成平台</p>
          <div class="feature-showcase">
            <div class="feature-item-large">
              <div class="feature-icon-large ai-icon"></div>
              <div class="feature-content">
                <h3>AI驱动分析</h3>
                <p>智能识别数据模式，提供深度洞察</p>
              </div>
            </div>
            <div class="feature-item-large">
              <div class="feature-icon-large data-icon"></div>
              <div class="feature-content">
                <h3>智能数据整合</h3>
                <p>多源数据融合，构建统一分析视图</p>
              </div>
            </div>
            <div class="feature-item-large">
              <div class="feature-icon-large report-icon"></div>
              <div class="feature-content">
                <h3>自动报告生成</h3>
                <p>一键生成专业分析报告，节省宝贵时间</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧登录区域 -->
        <div class="login-right">
          <div class="login-content">
            <h2 class="login-header-text">欢迎使用析语</h2>

            <!-- 登录类型切换选项卡，仅当两种登录方式都启用时显示 -->
            <div class="login-tabs" v-if="showAccountLogin && showPhoneLogin">
              <div
                class="tab-item"
                :class="{ active: loginType === 'account' }"
                @click="loginType = 'account'"
              >
                账号密码登录
              </div>
              <div
                class="tab-item"
                :class="{ active: loginType === 'phone' }"
                @click="loginType = 'phone'"
              >
                手机号登录
              </div>
            </div>

            <!-- 账号密码登录表单，仅当loginType为account且启用了账户登录时显示 -->
            <el-form
              v-if="loginType === 'account' && showAccountLogin"
              ref="accountFormRef"
              :model="accountForm"
              :rules="accountRules"
              class="login-form"
            >
              <el-form-item prop="username">
                <el-input
                  v-model="accountForm.username"
                  placeholder="请输入用户名"
                  type="text"
                  tabindex="1"
                  :prefix-icon="User"
                />
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                  v-model="accountForm.password"
                  placeholder="请输入密码"
                  :type="passwordVisible ? 'text' : 'password'"
                  tabindex="2"
                  :prefix-icon="Lock"
                >
                  <template #suffix>
                    <el-icon class="cursor-pointer" @click="togglePasswordVisibility">
                      <component :is="passwordVisible ? View : Hide" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <div class="remember-container">
                <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                <el-link type="primary" :underline="false" style="display: none">忘记密码?</el-link>
              </div>

              <el-button
                :loading="loading"
                type="default"
                class="login-button"
                @click="handleAccountLogin"
                >登录</el-button
              >
            </el-form>

            <!-- 手机号登录表单，仅当loginType为phone且启用了手机号登录时显示 -->
            <el-form
              v-if="loginType === 'phone' && showPhoneLogin"
              ref="phoneFormRef"
              :model="phoneForm"
              :rules="phoneRules"
              class="login-form"
            >
              <el-form-item prop="phone">
                <el-input
                  v-model="phoneForm.phone"
                  placeholder="请输入手机号"
                  type="text"
                  tabindex="1"
                  :prefix-icon="Iphone"
                />
              </el-form-item>

              <el-form-item prop="code">
                <div class="verification-code-container">
                  <el-input
                    v-model="phoneForm.code"
                    placeholder="请输入验证码"
                    tabindex="2"
                    :prefix-icon="Key"
                  />
                  <el-button
                    type="primary"
                    class="verification-code-button"
                    :disabled="cooldown > 0"
                    @click="sendVerificationCode"
                  >
                    {{ cooldown > 0 ? `${cooldown}秒后重新获取` : '获取验证码' }}
                  </el-button>
                </div>
              </el-form-item>

              <div class="spacer"></div>

              <el-button
                :loading="loading"
                type="default"
                class="login-button"
                @click="handlePhoneLogin"
                >登录</el-button
              >
            </el-form>

            <div class="login-tips" v-if="showTips">
              <div class="tips-header">
                <el-icon><InfoFilled /></el-icon>
                <span>产品特色</span>
              </div>
              <p>智能数据分析：快速洞察数据趋势，提供精准决策支持</p>
              <p>多维度可视化：将复杂数据转化为直观图表，轻松理解数据关系</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { User, Lock, View, Hide, Iphone, Key, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { login, phoneLogin, sendSmsCode } from '@/client/api/analysis'
import { setToken, setUserInfo, isLoggedIn } from '@/utils/auth'
import { useUserStore } from '@/stores/user'
import { getLoginMode } from '@/utils/config'
import Cookies from 'js-cookie'

// 定义组件名
defineOptions({
  name: 'LoginPage',
})

const router = useRouter()
const route = useRoute()
const userStore = useUserStore() // 使用用户store
const loading = ref(false)
const passwordVisible = ref(false)
const rememberMe = ref(localStorage.getItem('remember_me') === 'true')
const accountFormRef = ref(null)
const phoneFormRef = ref(null)
const showTips = ref(true)

// 获取登录模式配置
const loginModes = getLoginMode()
const showAccountLogin = loginModes.showAccount
const showPhoneLogin = loginModes.showPhone

// 根据配置设置默认登录类型
const loginType = ref(showAccountLogin ? 'account' : 'phone')

const cooldown = ref(0)

// 获取redirect参数，如果存在则在登录后跳转到指定路径
const redirect = computed(() => {
  // 获取URL中的redirect参数
  const urlRedirect = route.query.redirect

  // 检查当前URL是否为管理端登录页
  const isAdminLogin = route.path.includes('/admin')

  if (urlRedirect) {
    // 如果有redirect参数，检查它是否是管理端路径
    const isAdminRedirect = urlRedirect.includes('/admin')

    // 如果是普通登录页访问管理端路径，则重定向到客户端首页
    if (!isAdminLogin && isAdminRedirect) {
      return '/chat/chat'
    }

    return urlRedirect
  }

  // 默认重定向：管理端登录页 -> 管理端首页，普通登录页 -> 客户端首页
  return isAdminLogin ? '/admin/dashboard' : '/'
})

// 检查是否已登录，如果已登录则直接跳转到主页或重定向页面
onMounted(() => {
  initDataVisualizationBg()

  // 如果记住了用户名，自动填充
  const rememberedUsername = localStorage.getItem('remember_username')
  if (rememberedUsername) {
    accountForm.username = rememberedUsername
  }

  if (isLoggedIn()) {
    router.push(redirect.value)
  }
})

// 账号密码登录表单
const accountForm = reactive({
  username: import.meta.env.DEV ? 'chengyan' : '',
  password: import.meta.env.DEV ? 'abc123' : '',
})

// 手机号登录表单
const phoneForm = reactive({
  phone: import.meta.env.DEV ? '13800138000' : '',
  code: import.meta.env.DEV ? '123456' : '',
})

// 账号密码登录验证规则
const accountRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
}

// 手机号登录验证规则
const phoneRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 6, message: '验证码长度不正确', trigger: 'blur' },
  ],
}

// 数据可视化背景动画初始化函数
const initDataVisualizationBg = () => {
  const container = document.getElementById('data-bg-animation')
  if (!container) return

  // 创建Canvas元素
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  container.appendChild(canvas)

  // 设置Canvas尺寸
  function resizeCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)

  // 粒子类
  class Particle {
    constructor(x, y, size, color, speed) {
      this.x = x
      this.y = y
      this.size = size
      this.color = color
      this.speedX = speed * (Math.random() - 0.5) * 2
      this.speedY = speed * (Math.random() - 0.5) * 2
      this.connections = [] // 存储连接的粒子
    }

    update() {
      // 更新位置
      this.x += this.speedX
      this.y += this.speedY

      // 边界检测（反弹）
      if (this.x < 0 || this.x > canvas.width) {
        this.speedX = -this.speedX
      }
      if (this.y < 0 || this.y > canvas.height) {
        this.speedY = -this.speedY
      }

      // 避免粒子超出画布
      this.x = Math.max(0, Math.min(canvas.width, this.x))
      this.y = Math.max(0, Math.min(canvas.height, this.y))
    }

    draw() {
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
      ctx.fillStyle = this.color
      ctx.fill()
    }

    // 查找并存储距离小于指定值的粒子
    findConnections(particles, maxDistance) {
      this.connections = []
      particles.forEach((particle) => {
        if (particle !== this) {
          const dx = this.x - particle.x
          const dy = this.y - particle.y
          const distance = Math.sqrt(dx * dx + dy * dy)

          if (distance < maxDistance) {
            this.connections.push({
              particle: particle,
              distance: distance,
            })
          }
        }
      })
    }

    // 绘制连接线
    drawConnections() {
      this.connections.forEach((connection) => {
        const opacity = 1 - connection.distance / 150 // 距离越远线条越透明
        if (opacity > 0) {
          ctx.beginPath()
          ctx.moveTo(this.x, this.y)
          ctx.lineTo(connection.particle.x, connection.particle.y)
          ctx.strokeStyle = 'rgba(120, 81, 242, 0.15)' // 使用主题色
          ctx.lineWidth = 0.5
          ctx.stroke()
        }
      })
    }
  }

  // 创建粒子数组
  const particles = []
  const particleCount = Math.min(50, Math.floor((window.innerWidth * window.innerHeight) / 15000)) // 根据屏幕大小调整粒子数量

  // 使用主题色定义粒子颜色
  const particleColors = [
    'rgba(120, 81, 242, 0.35)', // 主题紫色
    'rgba(134, 109, 242, 0.25)',
    'rgba(90, 158, 238, 0.2)',
    'rgba(100, 120, 230, 0.15)',
  ]

  // 初始化粒子
  for (let i = 0; i < particleCount; i++) {
    const size = Math.random() * 4 + 1
    const x = Math.random() * canvas.width
    const y = Math.random() * canvas.height
    const speed = 0.4
    const color = particleColors[i % particleColors.length]

    particles.push(new Particle(x, y, size, color, speed))
  }

  // 添加数据节点形状
  function addDataNodes() {
    // 添加几个特殊的大节点表示数据节点
    const nodeCount = Math.min(5, Math.floor(particleCount / 10))

    for (let i = 0; i < nodeCount; i++) {
      const size = Math.random() * 6 + 8 // 更大的节点
      const x = Math.random() * canvas.width
      const y = Math.random() * canvas.height
      const speed = 0.2 // 移动速度更慢
      const color = 'rgba(120, 81, 242, 0.5)' // 使用主色调

      particles.push(new Particle(x, y, size, color, speed))
    }
  }

  addDataNodes()

  // 动画循环
  function animate() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 更新所有粒子
    particles.forEach((particle) => {
      particle.update()
      particle.findConnections(particles, 150) // 查找距离小于150px的粒子
    })
    // 先绘制所有连接线
    particles.forEach((particle) => {
      particle.drawConnections()
    })

    // 再绘制所有粒子（这样粒子会显示在线上方）
    particles.forEach((particle) => {
      particle.draw()
    })

    // 继续动画循环
    requestAnimationFrame(animate)
  }

  // 开始动画
  animate()

  // 性能优化：当页面不可见时减少动画帧数
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      container.style.opacity = '0.3' // 降低不可见状态下的透明度
    } else {
      container.style.opacity = '0.7'
    }
  })
}

// 登录成功后的处理
const handleLoginSuccess = (userData) => {
  // 存储token和用户信息
  setToken(userData.token)
  // 将用户名保存到cookie中
  Cookies.set('username', userData.userInfo.username)

  // 如果记住我被勾选，则保存用户名到localStorage
  if (rememberMe.value) {
    localStorage.setItem('remember_me', 'true')
    localStorage.setItem('remember_username', accountForm.username)
  } else {
    localStorage.removeItem('remember_me')
    localStorage.removeItem('remember_username')
  }

  // 存储用户信息到全局状态
  setUserInfo(userData.userInfo)
  userStore.setUserInfo(userData.userInfo)

  // 登录成功提示
  ElMessage.success('登录成功')

  // 处理重定向
  const redirectPath = redirect.value

  // 不使用setTimeout会导致跳转后立即执行getUserSessions，可能引起多次请求
  setTimeout(() => {
    router.replace(redirectPath)
  }, 300)
}

// 账号密码登录
const handleAccountLogin = async () => {
  try {
    await accountFormRef.value.validate()
    loading.value = true

    try {
      // 调用登录API
      const result = await login(accountForm.username, accountForm.password)
      // 处理JWT登录响应 - FastAPI的JWT返回格式通常包含access_token
      console.log('登录响应:', result)

      const userData = {
        token: result.access_token,
        userInfo: {
          id: 1,
          username: accountForm.username,
          nickname: accountForm.username,
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          roles: [''],
          permissions: ['*:*:*'],
        },
      }

      handleLoginSuccess(userData)
    } catch (error) {
      console.error('登录错误:', error)
      // 处理特定的错误情况
      if (error.response?.data?.detail === 'LOGIN_BAD_CREDENTIALS') {
        ElMessage.error('用户名或密码不正确，请重新输入')
      } else {
        ElMessage.error(error.response?.data?.detail || error.message || '登录失败，请稍后重试')
      }
    } finally {
      loading.value = false
    }
  } catch (error) {
    console.error('登录表单验证失败', error)
  }
}

// 手机号登录
const handlePhoneLogin = async () => {
  try {
    await phoneFormRef.value.validate()
    loading.value = true

    try {
      // 调用手机号登录API
      const result = await phoneLogin(phoneForm.phone, phoneForm.code)
      const userData = {
        token: result.access_token,
        userInfo: {
          id: 1,
          username: result.username,
          nickname: result.username,
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          roles: [''],
          permissions: ['*:*:*'],
        },
      }
      handleLoginSuccess(userData)
    } catch (error) {
      ElMessage.error(error.message || '登录失败，请检查手机号和验证码')
    } finally {
      loading.value = false
    }
  } catch (error) {
    console.error('手机号登录表单验证失败', error)
  }
}

// 发送验证码
const sendVerificationCode = async () => {
  try {
    await phoneFormRef.value.validateField('phone')

    // 开始倒计时
    cooldown.value = 60
    const timer = setInterval(() => {
      cooldown.value--
      if (cooldown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)

    try {
      // 调用发送验证码API
      await sendSmsCode(phoneForm.phone)
      ElMessage.success(`验证码已发送至 ${phoneForm.phone}`)
    } catch (error) {
      ElMessage.error(error.message || '验证码发送失败')
      // 发送失败时重置倒计时
      cooldown.value = 0
    }
  } catch (error) {
    console.error('手机号验证失败', error)
  }
}

// 切换密码可见性
const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.login-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 删除旧的粒子动画样式 */
.login-background::before {
  content: none;
}

/* 数据可视化背景动画样式 */
.data-bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

.data-bg-animation canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 左右分栏容器 */
.login-split-container {
  display: flex;
  width: 80%;
  max-width: 1200px;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.5s ease-in-out;
  position: relative;
  z-index: 1;
}

/* 左侧区域 */
.login-left {
  flex: 1;
  background: linear-gradient(145deg, rgba(120, 81, 242, 0.8), rgba(90, 158, 238, 0.8));
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.login-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%233b88eb10" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E');
  opacity: 0.2;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.login-logo-large {
  height: 90px;
  display: block;
  margin: 40px auto 10px auto;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
  animation: float 6s ease-in-out infinite;
}

.product-name {
  font-size: 3rem;
  font-weight: 700;
  margin: 20px 0;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.product-slogan {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 30px;
  opacity: 0.9;
  font-weight: 300;
  letter-spacing: 1px;
}

.product-intro {
  font-size: 1.1rem;
  margin: 20px 0 30px;
  line-height: 1.6;
  text-align: center;
  opacity: 0.9;
}

.product-intro p {
  margin: 10px 0;
}

.feature-showcase {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item-large {
  display: flex;
  align-items: center;
  gap: 15px;
}

.feature-icon-large {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-content h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.feature-content p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 右侧区域 */
.login-right {
  flex: 1;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-content {
  width: 100%;
  max-width: 420px;
  padding: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-header-text {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 25px;
  font-weight: 600;
  text-align: center;
}

.login-tabs {
  display: flex;
  margin-bottom: 30px;
  position: relative;
  border-bottom: 1px solid #e9eef2;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.tab-item.active {
  color: #7851f2;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #7851f2;
  border-radius: 3px;
  transition: all 0.3s;
}

.login-form {
  width: 100%;
}

.remember-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.spacer {
  height: 38px;
}

.verification-code-container {
  display: flex;
  gap: 10px;
}

.verification-code-button {
  flex-shrink: 0;
  background: linear-gradient(120deg, #7851f2, #5a9eee);
  border: none;
}

.login-button {
  width: 100%;
  margin-bottom: 25px;
  padding: 12px 0;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.3s;
  background: linear-gradient(120deg, #7851f2, #5a9eee);
  border: none;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(120, 81, 242, 0.3);
}

.login-tips {
  background-color: rgba(247, 250, 252, 0.8);
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 13px;
  color: #64748b;
  border-left: 3px solid #12b8f6;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.tips-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #12b8f6;
  font-weight: 600;
  font-size: 15px;
}

.tips-header i {
  margin-right: 8px;
}

.login-tips p {
  margin: 8px 0;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.login-tips p:before {
  content: '•';
  color: #12b8f6;
  font-weight: bold;
  margin-right: 8px;
}

.cursor-pointer {
  cursor: pointer;
}

.ai-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" width="24px" height="24px"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/%3E%3C/svg%3E');
}

.data-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" width="24px" height="24px"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/%3E%3C/svg%3E');
}

.report-icon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" width="24px" height="24px"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/%3E%3C/svg%3E');
}

/* 响应式调整 */
@media (max-width: 992px) {
  .login-split-container {
    width: 90%;
    flex-direction: column;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
  }

  .login-left {
    padding: 30px 20px;
    order: 2;
  }

  .login-right {
    order: 1;
    padding: 20px 10px;
  }

  .logo-wrapper {
    display: none;
  }

  .product-name {
    font-size: 2rem;
  }

  .product-slogan {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .product-intro {
    display: none;
  }

  .feature-showcase {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 0;
  }

  .feature-item-large {
    width: 45%;
  }
}

@media (max-width: 576px) {
  .login-split-container {
    width: 95%;
  }

  .login-left {
    padding: 20px 15px;
  }

  .login-content {
    padding: 15px;
  }

  .feature-item-large {
    width: 100%;
  }

  .feature-showcase {
    display: none;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
